<template>
  <div class="exampleitem-top">
    <NavHeader />
    <div class="exampleitem-top-content">
      <h1>高效、精准的数据清洗与申诉管理服务</h1>
      <h3>
        友盟智能科技为您提供全面、高效、精准的数据清洗和申诉管理解决方案，确保数据的准确性、一致性和完整性。
      </h3>
    </div>
  </div>
  <!-- <div class="exampleitem-center-item3">
    <h1>数据清洗的重要性</h1>
    <ul>
      <li>
        随着企业信息化的快速发展，数据量迅速增长，但数据标准不统一、质量低、人工采集和清洗效率低下等问题日益突出。这些问题不仅影响企业的决策效率，还可能导致业务风险。数据清洗是解决这些问题的关键步。
      </li>
    </ul>
    <img src="@/assets/img/exampleitem3/zyx.png" alt="" />
  </div> -->
  <div class="exampleitem-center-item22">数据清洗的重要性</div>
  <h3 class="exampleitem-center-item2h3">
    随着企业信息化的快速发展，数据量迅速增长，但数据标准不统一、质量低、人工采集和清洗效率低下等问题日益突出。这些问题不仅影响企业的决策效率，还可能导致业务风险。数据清洗是解决这些问题的关键步。
  </h3>
  <div class="exampleitem-center">
    <div class="exampleitem-center-item1">
      <h1>数据清洗的优势</h1>
      <div class="exampleitem-center-item1-content">
        <img src="@/assets/img/exampleitem3/ys.png" alt="" />
        <ul>
          <li>高效：自动清洗技术大大减少了人工干预，提高了清洗效率。</li>
          <li>精准：通过智能算法和人工验证相结合，确保数据清洗的准确性</li>
          <li>安全：数据传输和存储过程采用加密技术，确保数据安全</li>
          <li>全面：支持多种数据源和数据格式，满足不同企业的多样化需求。</li>
        </ul>
      </div>
    </div>
    <div class="exampleitem-center-item2">
      <div
        class="exampleitem-center-item2-content"
        v-for="(item, index) in list"
      >
        <h1>{{ item.title }}</h1>
        <ul v-for="(ele, index) in item.descs">
          <li>{{ ele }}</li>
        </ul>
        <img
          :class="item.title == '数据清洗流程' ? 'setStyle' : ''"
          :src="item.img"
          alt=""
        />
      </div>
    </div>

    <div class="exampleitem-center-item4">
      <div class="exampleitem-center-item4-content">
        <h1>数据申诉管理</h1>
        <h3>
          <!-- 友盟智能科技提供全面的数据申诉管理服务，确保数据的准确性和完整性 -->
        </h3>
        <ul>
          <li v-for="(item, index) in item4list">{{ item }}</li>
        </ul>
      </div>
    </div>
  </div>
  <BackTop />
  <Recommend backColor="#fff" />
  <pageBottom />
</template>
<script lang="ts" setup>
import { ref, reactive, computed, onMounted, watch } from "vue";
import NavHeader from "@/components/NavHeader.vue";
import Recommend from "@/components/Recommend.vue";
import pageBottom from "@/components/pageBottom.vue";
import BackTop from "@/components/BackTop.vue";
import js from "@/assets/img/exampleitem3/js.png";
import lc from "@/assets/img/exampleitem3/lc.png";

let list = reactive([
  {
    title: "数据清洗技术",
    descs: [
      "智能分词匹配：使用正向最大匹配法、逆向最大匹配法、最少切分、双向最大匹配法等技术，结合省市区、客户地址、经纬度和客户类型等关键字段信息，确保客户唯一性。",
      "自动清洗与人工验证：基于行业库数据，利用自主研发的字符相似度匹配算法，配合经纬度及走位等多种指标，完成数据的自动标准化清洗，自动匹配准确率可达到90%至99.48%。",
      "重复数据处理：内置多种去重算法对重复数据进行自动识别和处理。",
    ],
    img: js,
  },
  {
    title: "数据清洗流程",
    descs: [
      "数据采集：通过DDI直连、网页抓取、FTP等方式获取原始数据。",
      "数据预处理：对采集到的数据进行分类整理，提取关键字段。",
      "自动清洗：利用智能算法对数据进行标准化处理。",
      "人工验证：对于无法自动确认的部分，由专业人员进行人工核查。",
      "结果反馈：清洗后的数据与原始数据进行对比分析，确保数据的准确性和完整性。",
    ],
    img: lc,
  },
]);
let item4list = reactive([
  "♢  在线申诉受理：提供5X8小时在线申诉服务，委托方商务、销售代表或项目申诉小组人员若对渠道数据有疑问，可及时提出申诉。",
  "♢  问题分类与调查核实：对申诉问题进行分类，如经销商漏量、漏品种、打单量、客户匹配错误等，并进行调查核实。",
  "♢  更新调整：根据调查结果，对数据进行更新调整，确保数据的准确性。",
  "♢  可视化监控预警：系统自动监控申诉处理进度，实时掌握申诉处理情况，若有异常将智能预警。",
]);
</script>
<style lang="scss" scoped>
ul {
  li {
    list-style: none;
    list-style-type: circle;
    color: #666;
    font-size: 17px;
    line-height: 220%;
    margin-bottom: 20px;
  }
}
.exampleitem-top {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("@/assets/img/exampleitem3/bg.png");
  height: 100vh;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4784313725);
  }
  &-content {
    position: absolute;
    margin-left: 18%;
    top: 50%;
    h1 {
      margin-bottom: 20px;
      font-weight: 700;
      font-size: 35px;
    }
  }
}
.exampleitem-center {
  color: #000;
  padding: 80px 0;
  background-color: #ffffff;
  &-item1 {
    width: 80%;
    margin: auto;
    background-color: #f3f3f6;
    padding: 50px 300px;
    border-radius: 20px;
    h1 {
      text-align: center;
      margin-bottom: 30px;
    }
    &-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      img {
        width: 30%;
      }
    }
  }
  &-item2 {
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    height: 800px;
    &-content {
      width: 49%;
      background-color: #f3f3f6;
      border-radius: 20px;
      padding: 60px 20px;
      position: relative;
      h1 {
        text-align: center;
        margin-bottom: 30px;
      }
      img {
        width: 93%;
        height: 280px;
        position: absolute;
        bottom: 30px;
      }
    }
  }
  &-item3 {
    width: 80%;
    margin: auto;
    margin-top: 50px;
    background-color: #f3f3f6;
    border-radius: 20px;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    h1 {
      color: #000;
      text-align: center;
      margin-bottom: 20px;
    }
    ul li {
      text-align: center;
    }
    img {
      height: 500px;
    }
  }
  &-item22 {
    width: 100%;
    height: 60px;
    background-image: url("@/assets/img/exampleitem/tle.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 33px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-align: center;
    line-height: 60px;
    margin: 50px 0;
    color: #000;
  }
  &-item2h3 {
    text-align: center;
    margin-bottom: 50px;
    color: #666;
    width: 70%;
    margin: auto;
    line-height: 35px;
  }
  &-item4 {
    height: 700px;
    background-image: url("@/assets/img/exampleitem3/itembg.png");
    background-size: 100% 100%;
    margin-top: 100px;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.17);
    }
    &-content {
      width: 80%;
      margin: auto;
      position: absolute;
      top: 10%;
      left: 10%;
      // text-align: center;
      h1 {
        font-size: 35px;
      }
      ul {
        display: unset;
        li {
          list-style: none;
          list-style-type: none;
          // color: #000;
          font-size: 20px;
          line-height: 100%;
          text-align: left;
        }
      }
    }
  }
}
.setStyle {
  height: 350px !important;
  width: 50% !important;
  left: 50%;
  transform: translate(-40%);
}
</style>
